<script setup>
import { ref, reactive, onMounted, nextTick, onBeforeMount } from "vue";

import markerIcon from "@/assets/images/pc/marker.png";
import modelIcon from "@/assets/images/pc/model.png";
import scheduleIcon from "@/assets/images/pc/schedule.png";

const menuList = ref([
  {
    name: "巡检结果",
    icon: modelIcon,
  },
  {
    name: "巡检平台",
    icon: markerIcon,
  },
]);

const showJumpDialog = ref(false)

const jumpToInspect = (item,index) => {
    if(index==1){
        showJumpDialog.value = true
    }

}

const handleJumpConfirm = () => {
  showJumpDialog.value = false
  window.open('https://inspect.invix.tech/auth/login', '_blank')
}

</script>

<template>
    <div class="container">
        <div class="menu">
      <div
        class="menu-item"
        v-for="(item, index) in menuList"
        :key="index"
        :class="menuActive == index ? 'active' : ''"
        @click="jumpToInspect(item,index)"
      >
        <img :src="item.icon" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="right-sider">
        <div class="model-view">
            <iframe
                src="https://visualizer.inspect.invix.tech/#/verification?content=fcff3929877eeca52fcf15efb102e1f79d17a156059f2c3c51836ebd4031d6385681b659bf0c7bda4e427f510bd5a7bd6794a7070ca91a77f77e925852c04e69&type=suhexi"
                frameborder="no"></iframe>
        </div>
    </div>
 
    </div>
    <el-dialog v-model="showJumpDialog" title="跳转提示" width="30%" :close-on-click-modal="false" :draggable="true">
    <span>即将跳转到巡检平台，是否继续？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showJumpDialog = false">取消</el-button>
        <el-button type="primary" @click="handleJumpConfirm"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>


<style lang="scss" scoped>
.container {
    width: 100%;
  height: calc(100vh - 65px);
  font-family: SourceHanSansSC;
  display: flex;

  .menu {
    width: 55px;
    height: 100%;
    background: #394880;
    color: #ffffff;
    padding-top: 10px;
    box-sizing: border-box;

    .menu-item {
      width: 100%;
      padding: 5px 0px;
      box-sizing: border-box;
      text-align: center;
      cursor: pointer;
      margin-bottom: 10px;

      img {
        display: block;
        margin: auto;
        width: 25px;
        height: 25px;
      }

      span {
        font-size: 12px;
      }

      &.active {
        background: #6e91fb;
        border-radius: 5px;
      }
    }
  }
  .right-sider {
    width: calc(100% - 55px);
    // padding: 10px;
    box-sizing: border-box;
    .model-view {
        width: 100%;
        height: 100%;

        iframe {
            width: 100%;
            height: 100%;
        }
    }
  }

}
</style>
